<template>
  <div class="form-wraper">
    <el-form ref="form" :rules="rules" style="padding-top: 10px;" :model="form" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="form.projectName" :disabled="disableForm" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="日期" prop="name">
                <el-input v-model="form.name" :disabled="disableForm" />
              </el-form-item> -->
              <el-form-item label="最高温度" prop="minTemperature">
                <el-input v-model="form.minTemperature" :disabled="disableForm" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="最高温度" prop="legalPerson">
                <el-input v-model="form.legalPerson" :disabled="disableForm" />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="最低温度" prop="maxTemperature">
                <el-input v-model="form.maxTemperature" :disabled="disableForm" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-form-item label="施工部位情况" prop="constructionSiteSituation">
        <el-input v-model="form.constructionSiteSituation" :disabled="disableForm" type="textarea" />
      </el-form-item>
      <el-form-item label="用工情况" prop="employmentSituation">
        <el-input v-model="form.employmentSituation" :disabled="disableForm" type="textarea" />
      </el-form-item>
      <el-form-item label="材料设备情况" prop="materialDeviceSituation">
        <el-input v-model="form.materialDeviceSituation" :disabled="disableForm" type="textarea" />
      </el-form-item>
      <el-form-item label="施工进度情况" prop="constructionScheduleSituation">
        <el-input v-model="form.constructionScheduleSituation" :disabled="disableForm" type="textarea" />
      </el-form-item>
      <el-form-item label="工程报验等情况" prop="projectInspectionSituation">
        <el-input v-model="form.projectInspectionSituation" :disabled="disableForm" type="textarea" />
      </el-form-item>
      <el-form-item label="安全文明生成情况" prop="safeProductionSituation">
        <el-input v-model="form.safeProductionSituation" :disabled="disableForm" type="textarea" />
      </el-form-item>
      <el-form-item label="重要事项记录" prop="importantMattersRecord">
        <el-input v-model="form.importantMattersRecord" :disabled="disableForm" type="textarea" />
      </el-form-item>
    </el-form>
    <el-button style="margin-top:10px;" type="primary" @click="showFileModal = true">附件资料({{ fileList.length }})</el-button>
    <file-uploader v-model="fileList" :show-modal.sync="showFileModal" :disabled="disableForm" :can-download="optType==='detail'" />
  </div>
</template>

<script>
import fileUploader from '@/components/FileUploader'
import { getProjectConstructionLogDetail } from '@/api/planManage'
export default {
  name: 'AddProjectDailyRecord',
  components: {
    fileUploader
  },
  props: {
    optType: {
      type: String,
      default: 'detail'
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        projectName: '',
        maxTemperature: '',
        minTemperature: '',
        constructionSiteSituation: '',
        constructionScheduleSituation: '',
        projectInspectionSituation: '',
        employmentSituation: '',
        materialDeviceSituation: '',
        safeProductionSituation: '',
        importantMattersRecord: ''
      },
      fileList: [],
      showFileModal: false,
      rules: {}
    }
  },
  computed: {
    disableForm() {
      return this.optType === 'detail'
    }
  },
  watch: {
    data: {
      handler(newData, oldData) {
        if (newData.businessId) {
          this.getDetail(newData.businessId)
        }
      },
      immediate: true
    }
  },
  methods: {
    saveRecord(fn) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            projectConstructionLog: {
              ...this.form,
              ... this.optType === 'edit' ? {
                id: this.data.id
              } : {}
            },
            lstAttachment: this.fileList
          }
          fn(data)
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.fileList = []
    },
    getDetail(id) {
      getProjectConstructionLogDetail({ projectConstructionLogId: id }).then(res => {
        const { projectConstructionLog, lstAttachment } = res.data || {}
        if (projectConstructionLog) {
          Object.keys(this.form).map(key => {
            this.form[key] = projectConstructionLog[key]
          })
        }
        if (lstAttachment && lstAttachment.length > 0) {
          this.fileList = lstAttachment
        }
        // Object.keys(this.form).forEach(key => {
        //   const source = baseInfo[key]
        //   if (typeof source === 'boolean') {
        //     this.form[key] = source ? 1 : 0
        //   } else {
        //     this.form[key] = source
        //   }
        // })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label{
  color: #000;
}
::v-deep .el-input.is-disabled .el-input__inner{
  color: #000;
}
::v-deep .el-input.is-disabled .el-input__inner{
  color: #000;

}
</style>
